<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 垂直菜单</title>
</head>
<body>
<h1>垂直菜单</h1>

<div class="vertical-menu">
    <a href="#" class="active">Home</a>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
</div>
<style>
    .vertical-menu{
        background-color: gainsboro;
        width: 30%;
    }
    .vertical-menu a{
        text-decoration: none;
        font-size: 30px;
        padding: 30px;
        display: block;
        color: white;
    }
    .vertical-menu a:hover:not(.active){
        background-color: gray;
    }
    .active{
        background-color: green !important;
    }
</style>
</body>
</html>
